<html>
  <title>设置TabBar</title>
  <body>
    <script>
      /*
          一、uni.setTabBarItem(OBJECT)

                  1、概述

                          动态设置 tabBar 某一项的内容

                  2、平台差异说明

                              App	H5	微信小程序	支付宝小程序	            百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                              √	  √	    √	        √（钉钉小程序不支持）	    √	          √	                      √	        √	      √	          x	        √

                  3、setTabBarItem 兼容性
                              HarmonyOS
                              HBuilderX 4.23

                  4、OBJECT参数说明：

                                            属性	              类型	默认值	必填	说明	                                                                                  平台差异

                                        ①、index	            number		      是	tabBar 的哪一项，从左边算起	

                                        ②、text	              String		      否	tab 上的按钮文字	

                                        ③、iconPath	          String		      否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，
                                                                                  当 position 为 top 时，此参数无效。                                           微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片	

                                        ④、selectedIconPath	  String		      否	选中时的图片路径，icon 大小限制为 40kb，
                                                                                  建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效	

                                        ⑤、pagePath	          String		      否	页面绝对路径，必须在 pages 中先定义，
                                                                                  被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转）	        App（2.8.4+）、H5（2.8.4+）

                                        ⑥、visible	          Boolean	true	  否	该项是否显示	                                                                App（3.2.10+）、H5（3.2.10+）

                                        ⑦、iconfont	          Object		      否	字体图标，优先级高于 iconPath	                                                  App（3.4.4+）

                                        ⑧、success	          Funtion		      否	接口调用成功的回调函数	

                                        ⑨、fail	              Funtion		      否	接口调用失败的回调函数	

                                        ⑩、complete	          Funtion		      否	接口调用结束的回调函数（调用成功、失败都会执行）	


                                <1>、iconfont参数说明：

                                                      属性	        类型	          说明

                                                  ①、text	          String	    字库 Unicode 码

                                                  ②、selectedText	  String	    选中后字库 Unicode 码

                                                  ③、fontSize	      String	    字体图标字号(px)

                                                  ④、color	        String	    字体图标颜色

                                                  ⑤、selectedColor	String	    字体图标选中颜色

                  5、示例代码

                                    uni.setTabBarItem({
                                      index: 0,
                                      text: 'text',
                                      iconPath: '/path/to/iconPath',
                                      selectedIconPath: '/path/to/selectedIconPath'
                                    })

                              ★、注意: 设置 iconfont 属性时，pages.json iconfontSrc 需要指定字体文件，参考下面的配置

                                    // pages.json
                                    {
                                      "tabBar": {
                                        "iconfontSrc":"static/iconfont.ttf",
                                        "list": [
                                          {
                                            "pagePath": "pages/index/index",
                                            "text": "Tab1",
                                            "iconfont": {
                                              "text": "\ue102",
                                              "selectedText": "\ue103",
                                              "fontSize": "17px",
                                              "color": "#000000",
                                              "selectedColor": "#0000ff"
                                            }
                                          }
                                        ]
                                      }
                                    }
      */

      /*
            二、uni.setTabBarStyle(OBJECT)

                            1、概述

                                    动态设置 tabBar 的整体样式

                            2、平台差异说明

                                      App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                      √	  √	    √	          √	          √	          √                     	√	    √	        √	          x         	√

                            3、setTabBarStyle 兼容性

                                          HarmonyOS
                                          HBuilderX 4.23

                            4、OBJECT参数说明：

                                                        属性	            类型	默认值	  必填	说明

                                                    ①、color	          String		        否	tab 上的文字默认颜色，HexColor

                                                    ②、selectedColor	  String		        否	tab 上的文字选中时的颜色，HexColor

                                                    ③、backgroundColor	String		        否	tab 的背景色，HexColor

                                                    ④、backgroundImage	String		        否	图片背景。支持设置本地图片或创建线性渐变如，
                                                                                              优先级高于 backgroundColor，仅 App 2.7.1+ 支持

                                                    ⑤、backgroundRepeat	String		        否	背景图平铺方式。repeat：背景图片在垂直方向和水平方向平铺；
                                                                                              repeat-x：背景图片在水平方向平铺，垂直方向拉伸；
                                                                                              repeat-y：背景图片在垂直方向平铺，水平方向拉伸；
                                                                                              no-repeat：背景图片在垂直方向和水平方向都拉伸。
                                                                                              默认使用 no-repeat。仅 App 2.7.1+ 支持

                                                    ⑥、borderStyle	    String		        否	tabBar上边框的颜色， 仅支持 black/white，black对应颜色rgba(0,0,0,0.33)，
                                                                                              white对应颜色rgba(255,255,255,0.33)。

                                                    ⑦、midButton	      Object		        否	中间按钮 仅在 list 项为偶数时有效 详情。HBuilderX 3.6.9+

                                                    ⑧、success	        Funtion		        否	接口调用成功的回调函数

                                                    ⑨、fail	            Funtion		        否	接口调用失败的回调函数

                                                    ⑩、complete 	      Funtion		        否	接口调用结束的回调函数（调用成功、失败都会执行）


                                            <1>、backgroundImage创建线性渐变说明

                                                      backgroundImage: linear-gradient(to top, #a80077, #66ff00);

                                                      目前暂不支持 radial-gradient（径向渐变）。

                                                      目前只支持两种颜色的渐变，渐变方向如下：

                                                              ①、to right：从左向右渐变
                                                              ②、to left：从右向左渐变
                                                              ③、to bottom：从上到下渐变
                                                              ④、to top：从下到上渐变
                                                              ⑤、to bottom right：从左上角到右下角
                                                              ⑥、to top left：从右下角到左上角



                             5、示例代码

                                        uni.setTabBarStyle({
                                          color: '#FF0000',
                                          selectedColor: '#00FF00',
                                          backgroundColor: '#0000FF',
                                          borderStyle: 'white'
                                        })
      */

      /*
            三、uni.hideTabBar(OBJECT)

                        1、概述

                                  隐藏 tabBar

                        2、平台差异说明

                                  App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                  √	  √	    √	          √	          √         	√	                      √	    √	          √	        √	        √

                        3、hideTabBar 兼容性

                                    HarmonyOS
                                    HBuilderX 4.23
                                  
                        4、OBJECT参数说明：

                                          属性	      类型	  默认值	    必填	说明

                                    ①、animation	  boolean	  false	      否	是否需要动画效果，仅小程序支持

                                    ②、success	    Funtion		            否	接口调用成功的回调函数

                                    ③、fail	        Funtion		            否	接口调用失败的回调函数

                                    ④、complete     Funtion		            否	接口调用结束的回调函数（调用成功、失败都会执行）
      */

      /*
            四、uni.showTabBar(OBJECT)

                        1、概述

                                 显示 tabBar
                                 
                        2、平台差异说明

                                  App	  H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                  √	    √	    √	        √	            √	        √	                    √	        √	          √	        √	        √

                        3、showTabBar 兼容性

                                        HarmonyOS
                                        HBuilderX 4.23

                         4、OBJECT参数说明：

                                            属性	      类型	  默认值	必填	    说明

                                        ①、animation	boolean	false	    否	  是否需要动画效果，仅小程序支持

                                        ②、success	  Funtion		        否	  接口调用成功的回调函数

                                        ③、fail	      Funtion		        否	  接口调用失败的回调函数

                                        ④、complete	  Funtion		        否	  接口调用结束的回调函数（调用成功、失败都会执行）
      */

      /*
              五、uni.setTabBarBadge(OBJECT)

                          1、概述

                                  为tabBar 某一项的右上角添加文本
                                  
                                  
                          2、平台差异说明

                                  App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                  √	  √	  √	            √	          √	        √                       	√	    √	        √	          √           	x

                          3、setTabBarBadge 兼容性

                                          HarmonyOS
                                          HBuilderX 4.23

                          4、OBJECT参数说明：

                                              参数	    类型	    必填	      说明

                                          ①、index	  Number	    是	    tabBar的哪一项，从左边算起

                                          ②、text	    String	    是	    显示的文本，不超过 3 个半角字符

                                          ③、success	Function	  否	    接口调用成功的回调函数

                                          ④、fail	    Function	  否	    接口调用失败的回调函数

                                          ⑤、complete	Function	  否	    接口调用结束的回调函数（调用成功、失败都会执行）

                          5、示例代码

                                    uni.setTabBarBadge({
                                      index: 0,
                                      text: '1'
                                    })
      */

      /*
              六、uni.removeTabBarBadge(OBJECT)

                          1、概述

                                   移除 tabBar 某一项右上角的文本。
                                   
                          2、平台差异说明

                                    App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                    √	  √	    √ 	      √	            √	        √	                      √	      √	        √	          √	        x

                          3、removeTabBarBadge 兼容性

                                                HarmonyOS
                                                HBuilderX 4.23

                          4、OBJECT参数说明：

                                          参数	    类型	    必填	      说明

                                    ①、index	    Number	    是	    tabBar的哪一项，从左边算起

                                    ②、success	  Function	  否	    接口调用成功的回调函数

                                    ③、fail 	    Function	  否	    接口调用失败的回调函数

                                    ④、complete	  Function	  否	    接口调用结束的回调函数（调用成功、失败都会执行）
      */

      /*
                七、uni.showTabBarRedDot(OBJECT)

                          1、概述

                                      显示 tabBar 某一项的右上角的红点。

                          2、平台差异说明

                                      App	    H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                      √	      √	    √	          √	          √	        √	                      √	      √	          √	        x	        x

                          3、showTabBarRedDot 兼容性

                                          HarmonyOS
                                          HBuilderX 4.23

                          4、OBJECT参数说明：

                                          参数	      类型	    必填	    说明

                                      ①、index	    Number	    是	    tabBar的哪一项，从左边算起

                                      ②、success	  Function	  否	    接口调用成功的回调函数

                                      ③、fail	      Function	  否	    接口调用失败的回调函数

                                      ④、complete 	Function	  否	    接口调用结束的回调函数（调用成功、失败都会执行）
      */

      /*
              八、uni.hideTabBarRedDot(OBJECT)

                           1、概述

                                     隐藏 tabBar 某一项的右上角的红点。
                                     
                           2、平台差异说明

                                      App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                      √	   √	  √	          √         	√	        √	                    √	        √           	√     	x         	x

                           3、hideTabBarRedDot 兼容性
                                              HarmonyOS
                                              HBuilderX 4.23

                           4、OBJECT参数说明：

                                                参数	      类型	  必填	      说明

                                            ①、index	    Number	  是	    tabBar的哪一项，从左边算起

                                            ②、success	  Function	否	    接口调用成功的回调函数

                                            ③、fail	      Function	否	    接口调用失败的回调函数

                                            ④、complete	  Function	否	    接口调用结束的回调函数（调用成功、失败都会执行）
      */

      /*
              九、uni.onTabBarMidButtonTap(CALLBACK)

                          1、概述

                                  监听中间按钮的点击事件
                                  
                          2、平台差异说明

                                  App	                  H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                  √（HBuilderX 2.3.4+）	 √	  x	          x	          x	        x	                    x	        x	          x	        x	        x

                          3、onTabBarMidButtonTap 兼容性
                                                  HarmonyOS
                                                  x
      */

      /*
            十、注意点：

                        1、tabBar是原生的，层级高于前端元素

                        2、uni-app插件市场有封装的前端 tabbar ,但性能不如原神tabbar

                        3、如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

                        4、以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用，避免在 tabbar 未初始化前使用
      */
    </script>
  </body>
</html>